<template>
<block>
<view class="product-bg bg-white padding-top">
  <swiper class="screen-swiper square-dot screen" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500" @change="change">
    <swiper-item v-for="(item,index) in (goodsSpu.picUrls)" :key="index">
		<image class="screen-image" :src="item" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
  <view class="page-index cu-tag round">{{currents}}/{{goodsSpu.picUrls.length || 1}}</view>
</view>
<view class="cu-bar bg-white padding-top-xl">
  <view class="text-xxl padding-tb-xs padding-lr-sm">
    <text class="text-price text-blue text-bold">{{goodsSpu.salesPrice}}</text>
  </view>
  <button class="cu-btn icon margin-right" @tap="shareShowFun">
    <text class="cuIcon-share text-green"></text>
  </button>
</view>
<view class="cu-bar bg-white">
  <view class="text-lg text-bold padding-lr-sm">
    <text class="text-black">{{goodsSpu.name}}</text>
  </view>
</view>
<view class="cu-bar bg-white">
  <view class="text-sm padding-lr-sm">
    <text class="text-gray">{{goodsSpu.sellPoint}}</text>
  </view>
</view>
<view class="cu-bar bg-white solid-bottom">
  <view class="text-sm padding-lr-sm text-gray">
    <text v-if="goodsSpu.marketPrice">市场价：</text>
    <text class="text-price text-gray">{{goodsSpu.marketPrice}}</text>
  </view>
  <view class="text-sm margin-right text-gray">
    <text>库存：{{goodsSpu.stock}}</text>
  </view>
</view>

<view class="cu-bar bg-white solid-bottom">
  <view class="flex response">
    <view class="flex-sub text-sm">
      <view class="text-gray margin-left-sm">深圳发货</view>
    </view>
    <view class="flex-treble text-sm">
      <text class="cuIcon-location text-black" v-if="goodsSpu.deliveryPlace">{{goodsSpu.deliveryPlace.place}} | </text>
      <text class="text-black" v-if="goodsSpu.freightTemplat">运费：全国包邮</text>
    </view>
    <view class="flex-sub text-sm text-gray text-right margin-right-sm">销量{{goodsSpu.saleNum}}</view>
  </view>
</view>

<view class="cu-bar bg-white">
  <view class="flex response" @tap="showModalService">
      <view class="flex-sub text-sm">
        <view class="text-gray margin-left-sm">服务</view>
      </view>
      <view class="flex-sub text-sm text-gray text-right margin-right-sm">假一赔十 | 七天无理由退款</view>
    </view>
</view>

<ad :unit-id="config.adBannerID" v-if="config.adEnable"></ad>

<view class="cu-bar bg-white margin-top-sm">
  <view class="content">商品信息</view>
</view>

<view class="bg-white">
  <!-- <template is="wxParse" :data="wxParseData:description.nodes"/> --><mp-html :content="article_description"></mp-html>
</view>

<view class="cu-load bg-gray to-down">已经到底啦...</view>

<view class="cu-bar bg-white tabbar border shop foot">
  <button open-type="contact" @contact="handleContact" class="action bg-white"  :send-message-title="(goodsSpu.name)+'--咨询'" :send-message-img="goodsSpu.picUrls[0] ? goodsSpu.picUrls[0] : '/public/img/no_pic.png'" :show-message-card="true" :send-message-path="'/pages/goods/goods-detail/index?id='+(goodsSpu.id)">
    <view class="cuIcon-servicefill"></view> 
    客服
  </button>
  <navigator class="action" open-type="switchTab" url="/pages/shopping-cart/index">
    <view class="cuIcon-cart">
      <view class="cu-tag badge">{{shoppingCartCountFun}}</view>
    </view>
    购物车
  </navigator>
  <view class="btn-group">
    <button class="cu-btn shadow-blur margin-left-sm shopping-cart" @tap="toDo" data-type="1"><text class="text-white">加入购物车</text></button>
    <button class="cu-btn shadow-blur buy-now" @tap="toDo" data-type="2"><text class="text-white">立即购买</text></button>
  </view>
</view>
<!-- html转wxml -->

<view :class="'cu-modal '+(goodsSpu.shelf=='0'?'show':'')">
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-end">
      <view class="content">提示</view>
    </view>
    <view class="padding-xl">
      抱歉，该商品已下架
    </view>
  </view>
</view>

<poster id="poster" :hide-loading="false" :preload="false" :config="posterConfig" @success="onPosterSuccess" @fail="onPosterFail"></poster>
<view :class="'cu-modal bottom-modal '+(shareShow)">
  <view class="cu-dialog">
    <view class="cu-bar bg-white">
      <view class="action text-green"></view>
      <view class="action text-red" @tap="shareHide">取消</view>
    </view>
    <view class="padding flex flex-direction">
      <button class="cu-btn bg-green lg" open-type="share">发送给朋友</button>
    </view>
  </view>
</view>

<view :class="'cu-modal '+(posterShow ? 'show' : '')">
  <view class="cu-dialog">
    <view style="height: calc(100vh - 200rpx)">
      <image :src="posterUrl" style="height: 100%;"></image>
    </view>
    <view class="cu-bar bg-white">
      <view class="action margin-0 flex-sub" @tap="hidePosterShow">取消</view>
      <view class="action margin-0 flex-sub solid-left text-red text-bold" @tap="savePoster">保存到相册</view>
    </view>
  </view>
</view>
</block>
</template>

<script>
import baseRade from "@/components/base-rade/index";
import poster from "@/components/wxa-plugin-canvas/poster/index";
import Poster from '../../../components/wxa-plugin-canvas/poster/poster';

const {
  base64src
} = require('../../../utils/base64src.js');

const app = getApp();
export default {
	components: {
	  baseRade,
	  poster
	},
	data() {
		return {
		  config: app.globalData.config,
		  // goodsSpu: null,
		  goodsSpu: {
			  picUrls: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fcb85efb9ed928dd3c6fe39620fe2e69934606a40.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648124935&t=1001a3e087bf1c0e2f47a1304b27a1c3','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-4bb7fe71ef26c1863a3005eabb2a8ba6_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648124935&t=cb141dbc0bd3d77bd6e7f03fbd80a4a8'],
			  salesPrice: 20,
			  name: '醇醉黑标中小型犬全期狗粮10KG醇醉黑标中小型犬全期狗粮10KG',
			  stock: '200'
		  },
		  currents: 1,
		  cartNum: 1,
		  goodsSpecData: [],
		  shoppingCartCount: 0,
		  shareShow: '',
		  modalService: '',
		  id: "",
		  modalSku: false,
		  posterUrl: "",
		  posterShow: false,
		  place: "",
		  article_description: "",
		  shoppingCartCountFun: "",
		  posterConfig: {}
		};
	}, 
	onLoad(options) {
	  let id;

	  if (options.scene) {
		//接受二维码中参数
		id = decodeURIComponent(options.scene);
	  } else {
		id = options.id;
	  }

	  this.setData({
		id: id
	  });
	  app.globalData.initPage().then(res => {
		this.goodsGet(id);
		this.shoppingCartCountFun();
	  });
	}, 
	onShareAppMessage: function () {
	  let goodsSpu = this.goodsSpu;
	  let title = goodsSpu.name;
	  let imageUrl = goodsSpu.picUrls[0];
	  let path = 'pages/goods/goods-detail/index?id=' + goodsSpu.id;
	  return {
		title: title,
		path: path,
		imageUrl: imageUrl,
		success: function (res) {
		  if (res.errMsg == 'shareAppMessage:ok') {
			console.log(res.errMsg);
		  }
		},
		fail: function (res) {// 转发失败
		}
	  };
	}, 
	methods: {
	  goodsGet(id) {
		app.globalData.api.goodsGet(id).then(res => {
		  let goodsSpu = res.data;
		  this.setData({
			goodsSpu: goodsSpu
		  }); //html转wxml

		  //WxParse.wxParse('description', 'html', goodsSpu.description, this, 0)
		  this.article_description = this.escape2Html(goodsSpu.description);;
		});
	  },

	  change: function (e) {
		this.setData({
		  currents: e.detail.current + 1
		});
	  },

	  // 购买或加入购物车
	  toDo(e) {
		let canDo = true;

		if (canDo) {
		  let goodsSpu = this.goodsSpu;

		  if (e.currentTarget.dataset.type == '1') {
			//加购物车
			if (this.shoppingCartId) {
			  app.globalData.api.shoppingCartEdit({
				id: this.shoppingCartId,
				spuId: goodsSpu.id,
				quantity: this.cartNum,
				addPrice: goodsSpu.salesPrice,
				spuName: goodsSpu.name,
				picUrl: goodsSpu.picUrls ? goodsSpu.picUrls[0] : ''
			  }).then(res => {
				uni.showToast({
				  title: '修改成功',
				  duration: 5000
				});
				this.shoppingCartCountFun();
			  });
			} else {
			  app.globalData.api.shoppingCartAdd({
				spuId: goodsSpu.id,
				quantity: this.cartNum,
				addPrice: goodsSpu.salesPrice,
				spuName: goodsSpu.name,
				picUrl: goodsSpu.picUrls ? goodsSpu.picUrls[0] : ''
			  }).then(res => {
				uni.showToast({
				  title: '添加成功',
				  duration: 5000
				});
				this.setData({
				  modalSku: false
				});
				this.shoppingCartCountFun();
			  });
			}
		  } else {
			//立即购买，前去确认订单
			if (this.goodsSpu.stock <= 0) {
			  uni.showToast({
				title: '抱歉，库存不足暂时无法购买',
				icon: 'none',
				duration: 2000
			  });
			  return;
			}
			/* 把参数信息异步存储到缓存当中 */


			uni.setStorage({
			  key: 'param-orderConfirm',
			  data: [{
				spuId: goodsSpu.id,
				quantity: this.cartNum,
				salesPrice: goodsSpu.salesPrice,
				spuName: goodsSpu.name,
				picUrl: goodsSpu.picUrls ? goodsSpu.picUrls[0] : ''
			  }]
			});
			uni.navigateTo({
			  url: '/pages/order/order-confirm/index'
			});
		  }
		}
	  },

	  shoppingCartCountFun() {
		app.globalData.api.shoppingCartCount().then(res => {
		  let shoppingCartCount = res.data;
		  this.setData({
			shoppingCartCount: shoppingCartCount
		  }); //设置TabBar购物车数量

		  app.globalData.shoppingCartCount = shoppingCartCount + '';
		});
	  },

	  operateCartEvent() {
		this.shoppingCartCountFun();
	  },

	  shareShowFun() {
		this.setData({
		  shareShow: 'show'
		});
	  },

	  shareHide() {
		this.setData({
		  shareShow: ''
		});
	  },

	  onPosterSuccess(e) {
		const {
		  detail
		} = e;
		this.setData({
		  posterUrl: detail
		});
	  },

	  onPosterFail(err) {
		console.error(err);
	  },

	  hidePosterShow() {
		this.setData({
		  posterShow: false,
		  shareShow: ''
		});
	  },

	  /**
	   * 异步生成海报
	   */
	  onCreatePoster() {},

	  //点击保存到相册
	  savePoster: function () {},

	  handleContact(e) {
		console.log(e);
	  },

	  showModalService() {
		console.log("占位：函数 showModalService 未声明");
	  }
	}
};
</script>
<style >
.product-bg{width:100%;position:relative;}
.product-bg swiper{width:100%;height:calc(100vw);position:relative;}
.product-bg .page-index{
  position:absolute;right:30rpx;bottom:30rpx;
}
.cu-bar.tabbar.shop .action {
  width: unset;
}
.to-down{
  margin-bottom: 100rpx
}
.screen{
  width:94% !important; 
  border-radius: 20rpx; 
  min-height: 900rpx; 
  margin:auto;
  background-color: #ececec;
}
.screen-image{
  padding-top:80rpx;
  height:780rpx !important;
}
.shopping-cart{
  background-color: #2d2d2f !important;
  font-weight:300;
  width:220rpx;
}
.buy-now{
  background-color: #2967ff !important;
  font-weight:300;
  width:220rpx;
}
</style>